<template>
  <div class="city">
    <!-- 头部 -->
    <!-- <div class="top">
      <div class="left">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="txt">
        城市选择
      </div>

    </div> -->
    <div class="header">
      城市选择
      <router-link to="/">
        <div class="iconfont header-back">&#xe624;</div>
      </router-link>
      <div class="search">
        <input class="search-input" type="text" placeholder="输入城市名或拼音" />
      </div>
    </div>

    <!-- ----- -->
    <!-- :hot="hotCities" -->
    <List :cities="cities" :letter="letter"> </List>
    <Alphabet :cities="cities" @change="handleLetterChange"></Alphabet>
  </div>
</template>

<script>
import axios from "axios";
import List from "@/components/List.vue";
import Alphabet from "@/components/Alphabet.vue";
// import Bscroll from "better-scroll";
export default {
  components: { List, Alphabet },
  data() {
    return {
      list: [],
      cities: [],
      letter: ""
    };
  },
  // created() {
  //   axios.get("../static/city.json").then(res => {
  //     console.log(res);
  //     this.list = res.data.data.hotCities;
  //     this.cities = res.data.data.cities;
  //   });
  // },

  methods: {
    getCityInfo() {
      axios.get("static/city.json").then(this.handleGetCityInfoSucc);
    },
    handleGetCityInfoSucc(res) {
      res = res.data;
      console.log(res.data);
      if (res.ret && res.data) {
        const data = res.data;
        this.cities = data.cities;
        this.hotCities = data.hotCities;
      }
    },

    handleLetterChange(letter) {
      console.log(letter);
      this.letter = letter;
    }
    // change(val) {
    //   console.log(val);
    // }
  },
  mounted() {
    this.getCityInfo();
  }
  // created() {
  //   // 取的是字母
  //   let zimu = localStorage.getItem("change");
  //   console.log(zimu);
  // },
  // watch: {
  //   letter() {
  //     // console.log(this.letter);
  //     if (this.zimu) {
  //       const element = this.$refs[this.letter][0];
  //       console.log(element);
  //       this.scroll.scrollToElement(element);
  //     }
  //   }
  // }
  //   mounted() {
  //     this.scroll = new Bscroll(this.$refs.wrapper);
  //   }
};
</script>


<style lang="stylus" scoped>
.city {
  box-sizing: border-box;
}

.top {
  width: 100%;
  height: 2rem;
  background-color: #00b2c8;
  display: flex;
  align-items: center;

  .left {
    width: 10%;
    line-height: 1.2rem;
    color: #fdfdfd;
    font-size: 0.4rem;
  }

  .txt {
    width: 90%;
    color: #fdfdfd;
    text-align: center;
    font-size: 0.6rem;
  }
}

.search {
  height: 1.8rem;
  padding: 0 0.1rem;

  // background-color: #00b2c8;
  .search-input {
    box-sizing: border-box;
    width: 100%;
    height: 1.2rem;
    border: 0;
    padding: 0 0.1rem;
    line-height: 0.62rem;
    text-align: center;
    border-radius: 0.06rem;
    color: #666;
  }
}

.search {
  height: 0.72rem;
  padding: 0 0.1rem;

  // background-color: red;

  // background: $bgColor;
  .search-input {
    box-sizing: border-box;
    width: 100%;
    height: 1.62rem;
    padding: 0 0.1rem;
    line-height: 0.62rem;
    text-align: center;
    border-radius: 0.06rem;
    color: #666;
  }
}

.header {
  position: relative;
  overflow: hidden;
  height: $headerHeight;
  line-height: $headerHeight;
  text-align: center;
  // color: #fff;
  // background: $bgColor;
  font-size: 0.7rem;
  position: fixed;
  width: 100%;
  height: 3rem;
  background-color: skyblue;

  .header-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.64rem;
    text-align: center;
    font-size: 0.4rem;
    color: #fff;
  }
}
</style>
